<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('医疗机构异常数量统计图')"/>
</head>
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight" style="height: 95%">


    <div class="ibox float-e-margins">
        <div class="ibox-title">
            <h5>医疗机构异常数量统计图</h5>
            <div class="ibox-tools">
                <a class="collapse-link">
                    <i class="fa fa-chevron-up"></i>
                </a>
                <!--<a class="dropdown-toggle" data-toggle="dropdown" href="graph_flot.html#">-->
                    <!--<i class="fa fa-wrench"></i>-->
                <!--</a>-->
                <!--<ul class="dropdown-menu dropdown-user">-->
                    <!--<li><a href="graph_flot.html#">选项1</a>-->
                    <!--</li>-->
                    <!--<li><a href="graph_flot.html#">选项2</a>-->
                    <!--</li>-->
                <!--</ul>-->
                <a class="close-link">
                    <i class="fa fa-times"></i>
                </a>
            </div>
        </div>
        <div class="ibox-content h-full">
            <div class="echarts  h-full" id="echarts-pie-chart"></div>
        </div>
    </div>


</div>
<th:block th:include="include :: footer"/>
<th:block th:include="include :: echarts-js"/>
<script type="text/javascript">

    var prefix = ctx + "yf/reports";
    $(function () {

        var pieChart = echarts.init(document.getElementById("echarts-pie-chart"));

        $.post(prefix + "/echarets/hospitalExceptionNum", {}, function (res) {
            if (res.code == 0) {
                var seriesData = res.rows;
                var option = {
                    tooltip: {
                        trigger: 'item',
                        formatter: "{b} : {c}  ({d}%)"  // 鼠标滑上显示框   {a} <br/>{b} : {c}  ({d}%)
                    },
                    legend: {
                        show: true,
                        top: '3%',
                        right: '10%',
                        orient: 'horizontal',
                        // left : 120,
                        data: seriesData.map(c => {
                            return c.name
                        }),
                textStyle: {
                    color: 'black'
                }
            },
                //设置饼状图每个颜色块的颜色
                color: ['#E62346', '#37BBF8'],
                    series: [{
                    name: '颜色',
                    type: 'pie',
                    radius: '60%',
                    center: ['45%', '55%'],
                    label: {
                        normal: {
                            //饼形图显示格式
                            formatter: '{b|{b}：}{c|{c}个}   {per|{d}%}',
                            rich: {
                                b: {
                                    color: 'black',
                                    fontSize: 14,
                                    lineHeight: 33
                                },
                                c: {
                                    color: 'black',
                                    fontSize: 14,
                                    lineHeight: 33
                                },
                                //设置百分比数字颜色
                                per: {
                                    color: '#00B4FB',
                                    fontSize: 14,
                                    padding: [2, 4],
                                    borderRadius: 2
                                }
                            }
                        }
                    },
                    data: seriesData,
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }]
            };

                pieChart.setOption(option);
                $(window).resize(pieChart.resize);
            }
        });


    });
</script>
</body>
</html>